<template>
    <div id="DataShow" class="br-5 mt-15">
        <div class="__layout show_wrap">
            <div class="grid__left">
                <div class="showUserInfo hidden-xs-only no-select common-card">
                    <div class="userInfoWrap">
                        <img :src="userInfo.mockFace" class="face" />
                        <div class="rightWrap">
                            <h3 class="userName">{{ userInfo.username }}</h3>
                            <span class="userAuth">{{ userInfo.auth }}</span>
                        </div>
                    </div>
                    <div class="loginInfo">
                        <div class="lastLoginTime">
                            <el-icon>
                                <alarm-clock />
                            </el-icon>&nbsp;上次登录时间：&nbsp;&nbsp;&nbsp;
                            <span>{{ userInfo.last_login.time }}</span>
                        </div>
                        <div class="lastLoginAddr">
                            <el-icon>
                                <add-location />
                            </el-icon>&nbsp;上次登录地点：&nbsp;&nbsp;&nbsp;
                            <span>{{ userInfo.last_login.addr }}</span>
                        </div>
                    </div>
                </div>
                <div class="buyNum common-card">
                    <el-scrollbar>
                        <el-table
                            :data="brandList"
                            style="width: 100%;height: 100%;"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                        >
                            <el-table-column prop="brand" label="Brand" sortable />
                            <el-table-column prop="today" label="BuyToday" />
                            <el-table-column prop="month" label="BuyMonth" />
                            <el-table-column prop="total" label="BuyTotal" sortable />
                        </el-table>
                    </el-scrollbar>
                </div>
            </div>
            <div class="grid__right">
                <div class="today_order_wrap">
                    <div class="order_card common-card mb-20" v-for="item in order_config">
                        <div class="region_icon" :style="{ 'background-color': item.bgColor }">
                            <i class="icon iconfont" :class="item.icon"></i>
                        </div>
                        <div class="order_info">
                            <span class="amount">
                                <span class="no-select">$</span>
                                {{ item.amount }}
                            </span>
                            <span class="title">{{ item.title }}</span>
                        </div>
                    </div>
                </div>
                <div class="chart_line mb-20 br-5 common-card">
                    <StackedLineChart />
                </div>
                <div class="chart_wrap flex">
                    <div class="chart_bar common-card br-5">
                        <ChartUsers />
                    </div>
                    <div class="chart_pie common-card br-5">
                        <ChartProportion />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import StackedLineChart from '@/components/ECharts/StackedLineChart.vue';
import ChartUsers from '@/components/ECharts/ChartUsers.vue';
import ChartProportion from '@/components/ECharts/ChartProportion.vue';

const store = useStore()
const userInfo = store.state.userInfo
const brandList = ref(0)
const getBrandList = async () => {
    const res = await $api.getBrandList()
    brandList.value = res
}
getBrandList()

const order_config = ref(0)
const getOrderList = async () => {
    const res = await $api.getOrderList()
    order_config.value = res
}
getOrderList()

</script>

<style lang='less'>
#DataShow {
    display: flex;
    justify-content: center;
    flex: 1;
    padding: 20px;
    padding-top: 0;
    .__layout {
        flex: 1;
        display: flex;
        .grid__left {
            flex: 8;
            display: flex;
            flex-flow: column;
            .buyNum {
                flex: 1;
                background-color: var(--bgColor2);
            }
        }
        .grid__right {
            flex: 16;
            display: flex;
            flex-flow: column;
            margin-left: 30px;
        }
    }

    .show_wrap {
        .grid__left {
            .showUserInfo {
                display: flex;
                flex-flow: column;
                margin-bottom: 20px;
                background-color: var(--bgColor2);
                .userInfoWrap {
                    display: flex;
                    padding: 20px 0;
                    margin: 0 20px;
                    border-bottom: 1px solid var(--bgColor3);
                    .face {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        margin-right: 20px;
                        transition: all 0.5s ease;
                        cursor: pointer;
                        &:hover {
                            transform: rotate(720deg);
                        }
                    }
                    .rightWrap {
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        .userName {
                            font-weight: 400;
                            line-height: 2;
                            margin: 0;
                            color: var(--color1);
                        }
                        .userAuth {
                            color: var(--color2);
                        }
                    }
                }
                .loginInfo {
                    padding: 10px 20px;
                    font-size: 12px;
                    color: var(--color4);
                    span {
                        line-height: 1.8;
                    }
                }
            }
            .buyNum {
                padding: 20px;
                overflow-y: auto;
            }
        }
        .grid__right {
            .today_order_wrap {
                display: flex;
                flex-flow: wrap;
                align-items: space-between;
                justify-content: space-between;
                .order_card {
                    display: flex;
                    width: 31%;
                    height: 60px;
                    border-radius: 5px;
                    overflow: hidden;
                    background-color: var(--bgColor2);
                    .region_icon {
                        width: 60px;
                        height: 60px;
                        line-height: 60px;
                        text-align: center;
                        .icon {
                            font-weight: 700;
                            font-size: 22px;
                            color: var(--color4);
                        }
                    }
                    .order_info {
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        padding-left: 10px;
                        .amount {
                            font-size: 22px;
                            line-height: 1.5;
                            letter-spacing: 2px;
                            color: var(--color1);
                        }
                        .title {
                            font-size: 12px;
                            color: var(--color4);
                        }
                    }
                }
            }
            .chart_line {
                min-height: 300px;
                display: flex;
                background-color: var(--bgColor2);
                padding: 20px;
            }
            .chart_wrap {
                min-height: 280px;
                .chart_bar {
                    flex: 1;
                    padding: 20px;
                    background-color: var(--bgColor2);
                    margin-right: 10px;
                }
                .chart_pie {
                    margin-left: 10px;
                    flex: 1;
                    background-color: var(--bgColor2);
                }
            }
        }
    }
}

@media screen and(max-width: 768px) {
    #DataShow {
        padding: 10px;
        overflow-x: hidden;
    }
    .__layout {
        padding: 0 20px;
        flex-flow: column;
        .buyNum {
            max-height: 200px;
        }
        .grid__right {
            margin-top: 10px;
            margin-left: 0 !important;
        }
        .today_order_wrap {
            .order_card {
                width: 48% !important;
                margin-bottom: 10px !important;
            }
        }
        .chart_wrap {
            flex-flow: column;
            margin-bottom: 20px;
            .chart_bar {
                margin-right: 0 !important;
                padding: 10px !important;
                min-height: 200px;
            }
        }
    }
    .chart_line {
        padding: 10px !important;
        min-height: 150px;
    }
    .chart_pie {
        min-height: 200px;
        margin-top: 20px;
        margin-left: 0 !important;
    }
}
</style>
